import ShowEditor from '@/components/editor';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import { Breadcrumb, message,Button } from 'antd';
import { useCallback, useEffect, useState } from 'react';
import "./index.less"
import Icon from '@ant-design/icons';
import { addEvaluate, getDocDetail } from '@/api';
import { useDispatchDoc, useStateDocInfo ,useStateUserInfo} from '@/store/hooks';
import { MenuItem, MenuList, ModeType } from '@/types';
import { useNavigate } from "react-router-dom";
const HeartSvg = () => (
  <svg viewBox="0 0 1024 1024" p-id="6514" width="24" height="24">
    <path d="M758.052571 384.512l8.777143-0.073143c83.894857-0.658286 141.385143 67.584 126.683429 150.162286l-46.226286 259.437714c-10.020571 56.466286-63.926857 101.522286-121.124571 101.595429l-427.52 0.365714c-23.405714 0-42.496-19.017143-42.715429-42.422857l-0.731428-384c0-23.259429 18.651429-42.276571 41.984-42.642286h22.747428c92.013714 0.731429 170.934857-86.747429 170.715429-171.008-0.146286-86.747429 39.789714-126.756571 106.496-127.561143 62.171429-0.731429 106.569143 59.611429 107.300571 149.138286 0.219429 26.550857-6.290286 73.216-14.482286 107.446857l20.626286-0.146286 47.469714-0.292571zM191.634286 468.406857l0.365714 407.186286a23.405714 23.405714 0 0 1-4.754286 14.482286 14.409143 14.409143 0 0 1-11.410285 5.924571h-31.670858a14.482286 14.482286 0 0 1-11.410285-5.851429 23.405714 23.405714 0 0 1-4.754286-14.555428V468.406857a23.405714 23.405714 0 0 1 4.681143-14.482286 14.409143 14.409143 0 0 1 11.410286-5.924571h31.451428c8.777143 0 16.091429 9.142857 16.091429 20.406857z" p-id="6515"></path>
  </svg>
);

const HeartIcon = (props: Partial<CustomIconComponentProps>) => (
  <Icon component={HeartSvg} {...props} />
);

interface DetailProps{
  docId: number|string;
  handleClick:Function;
  keyPath:string[];
  menuList: MenuItem[];
}

const Detail = (props:DetailProps) => {
  const [type,setType] = useState<number>(0);
  const {docId,handleClick,keyPath,menuList} = props;
  const docInfo = useStateDocInfo()
  const userInfo = useStateUserInfo()
  const [value,setValue] = useState('');
  const [breadcrumb,setBreadcrumb] = useState<string[]>([]);
  const { stateSetDoc } = useDispatchDoc();
  useEffect(()=>{
    setBreadcrumb(keyPath.reverse())
  },[keyPath,menuList])

  useEffect(() => {
    if(docId){
      getDocDetail(docId).then((info:any) => {
        if (info) {
          stateSetDoc(info)
          setValue(info.content)
          setTimeout(() => {
            setType(0)
          }, 300);
        }
      }).catch(() => {})
    }
  },[docId])

  const handleClickEvaluate = (type:number)=>{
    setType(type)
    // addEvaluate({docId, type}).then((res) => {
    //   if (res.status === 0) {
    //     message.success(res.msg);
    //   }
    // });
  }
  const navigate = useNavigate();
  const renderBreadcrumb = useCallback(()=>{
    return (<Breadcrumb className='breadcrumb'>
    {breadcrumb.map(item => <Breadcrumb.Item key={item}>{getBreadcrumb(item,menuList)}</Breadcrumb.Item>)}
  </Breadcrumb>)
  },[menuList,breadcrumb])

  const getBreadcrumb = (value:string,list:MenuList) => {
    let name =''
    list.map(item=>{
      if(item['uuid']==value){
        name = item[MENU_TITLE];
      }else if(item[MENU_CHILDREN]){
        if(getBreadcrumb(value,item[MENU_CHILDREN])){
          name = getBreadcrumb(value,item[MENU_CHILDREN])
        }
      }
    })
    return name
  }


  return (
    <div>
      {/* {renderBreadcrumb()} */}
        <div style={{height:'100%'}} className="editor-wrapper">
       <div className="details-top">
        { 
        userInfo&&userInfo.isDocAdmin ?
       (<Button type="primary" className='edit-btn' onClick={() => { navigate(`/editing?url=` + docId) }} >编辑</Button>) :null
        }
      </div>
      <div>
        <ShowEditor value={value} mode={ModeType.EXHIBITION} />
      </div>
      {value&&<div className="operation-wrapper">
        {/* {docInfo&&<div className="prev" onClick={()=>{handleClick(docInfo.prevId)}}>
          <p>上一篇</p>
          <div>{docInfo.prevTitle}</div>
        </div>}
        {docInfo&&<div className={docInfo?'next':'next next-only'} onClick={()=>{handleClick(docInfo.nextId)}}>
          <p>下一篇</p>
          <div>{docInfo.nextTitle}</div>
        </div>} */}
      </div>}
      {value&&<div className="evaluate-wrapper">
        <p>文档内容是否对您有帮助?</p>
        <div>
        {/* <div style={{display: (index===this.state.currentIndex) ? "block" : "none"}}>此标签是否隐藏</div> */}
          <div onClick={()=>{handleClickEvaluate(1)}}> <HeartIcon style={{ fill: (type===1) ? "#007AF5" : " "}} className={'my-icon'}/> 有帮助</div>
          <div onClick={()=>{handleClickEvaluate(2)}}> <HeartIcon style={{ fill: (type===2) ? "#007AF5" : " "}} className={'my-icon kick'}/> 没帮助</div>
        </div>
      </div>}
    </div>
    </div>
    
  );
}
// &:visited{
//   .my-icon{
//     cursor: pointer;
//     background: #E5F1FE;
//     fill:#007AF5;
//   }
// }

export default Detail
